<template>
  <div class="main-wrapper">
    <h3>这个是子组件B</h3>
    <div class="buttons-wrapper">
      <button @click="emitParentEvent" class="button">点击触发父组件A事件</button>
      <button @click="emitBrotherEvent" class="button">点击触发兄弟组件C事件</button>
    </div>
  </div>
</template>
<script>
import eventBus from '@/util/eventBus.js';

export default {
  methods: {
    emitParentEvent() {
      // debugger
      eventBus.emit(eventBus.TYPES.EVENT1.ADD.CONFIRM, '父组件A事件被触发了');
    },
    emitBrotherEvent() {
      eventBus.emit(eventBus.TYPES.EVENT1.ADD.INVOKE, '兄弟组件C事件被触发了');
    }
  }
}
</script>

<style lang="scss">
@import 'src/assets/styles/global';

.main-wrapper {
  border: 1px solid rgba(1, 1, 1, 0.5);
  margin: 50px;
  padding-bottom: 20px;

  .buttons-wrapper {
    display: flex;
    flex-direction: column;

    .button {
      margin: 5px auto 0;
      width: 200px;
      display: block;
    }
  }
}

</style>
